<template>
	<view class="submit-order">
		<an-nav-bar title="提交订单" :isBg="true" :navHeight="false"> </an-nav-bar>
		<view style="height:calc(var(--status-bar-height) + 88rpx);"></view>
		<view class="content">
			<view class="visitTips flex">下单后未服务，技师未出发平台全额退款</view>
			<view class="box top showVisitTips">
				<view class="line address flex_sw" @click="toAddress">
					<image src="/static/weizhi.png" mode=""></image>
					<view class="info" v-if="!order.addressId">添加服务地址</view>
					<view class="info" v-else>
						<view class="ads">
							<text>{{address.area}}</text>
							<text>{{address.houseNumber}}</text>
						</view>
						<view class="ads">{{address.concatName}}{{address.sex == 1 ?'(先生)':'（女士）'}}+86{{address.mobile}}
						</view>
					</view>
				</view>
				<view class="line time flex_sw">
					<image src="/static/biao.png" mode=""></image>
					<view class="info flex_sw" @click="bookTime">
						<view class="">服务时间</view>
						<span class="">{{order.serviceTime ?order.serviceTime: '请选择服务时间'}}</span>
					</view>
				</view>
				<view class="line server flex_sw noMore">
					<image src="/static/server.png" mode=""></image>
					<view class="info flex_sw">
						<view class="">服务人员</view>
						<view class="technician flex">
							<span>{{technicianItem.nickName}}</span>
						</view>
					</view>
				</view>
			</view>
			<view class="box inner">
				<view class="line product flex noMore">
					<image class="logo" :src="$common.binImage(projectItem.projectImg)" mode="">
					</image>
					<view class="productInfo">
						<view class="name">{{projectItem.projectName}}</view>
						<view class="count">x{{order.buyNum}}</view>
						<view class="price">¥{{projectItem.sellPrice}}</view>
					</view>
					<view class="op flex">
						<uni-number-box v-model="order.buyNum" :min="1" :max="99" @change="changeBuyNum">
						</uni-number-box>
					</view>
				</view>
				<!-- 	<view class="line coupon flex_sw">
					<text>订单距离</text>
				</view> -->
				<!-- <view class="line fare noMore flex_sw">
					<view class="">往返路费</view>
					<view class="text">¥0</view>
				</view> -->
				<view class="line coupon flex_sw">
					<view class="info flex_sw">
						<view class="">优惠券</view>
						<view class="text" @click="couponSelect">
							{{totalItem.couponId &&totalItem.couponPrice ? '-￥' + totalItem.couponPrice : '暂无可用的优惠券'}}
						</view>
					</view>
				</view>
				<view class="line allPrice flex noMore">
					<view class="">小计 ¥{{totalItem.sellPrice}}</view>
				</view>
			</view>
			<view class="note flex_center">
				<text>如商家在未征得您同意的情况下，安排非本人进行服务，您有权拒绝服务，如您未接受服务可申请全额退款。</text>
			</view>
			<view class="box remarks">
				<view class="line flex_sw">
					<view class="info flex_sw">
						<view class="">备注</view>
						<input type="text" v-model="order.remarks" placeholder="可填写其他需求" >
					</view>
				</view>
			</view>
		</view>
		<view class="bottom flex_sw">
			<view class="all">
				应付：
				<text v-if="totalItem.totalPrice">￥{{totalItem.totalPrice}}</text>
			</view>
			<button class="btn" @click="submit">提交订单</button>
		</view>
		<lw-message ref="lwMessage" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order: {
					addressId: "", //服务地址
					storeId: "", //商家id
					serviceTime: "", //服务时间
					projectId: "", //项目id
					buyNum: 1, //购买数量
					orderType: 1, //订单类型：1-线上订单 2-线下订单
					technicianId: "", //技师id
					couponId: "", //优惠券Id
					remarks:""
				},
				projectItem: {},
				technicianItem: {},
				address: {},
				totalItem: {}
			};
		},
		onLoad(option) {
			this.order.storeId = option.storeId
			this.order.projectId = option.projectId
			this.order.technicianId = option.technicianId
			this.$http.get('/appNoAuth/store/serviceProject/' + option.projectId).then(res => {
				this.projectItem = res.data
			})
			this.$http.get('/appNoAuth/store/massageTechnician/getInfo/' + option.technicianId).then(res => {
				this.technicianItem = res.massageTechnician
			})
			this.calculateOrderPrice()
		},
		methods: {
			couponSelect() {
				uni.navigateTo({
					url: '/pages/submitOrder/couponSelect'
				})
			},
			changeBuyNum(e) {
				this.order.buyNum = e
				this.calculateOrderPrice()
			},
			calculateOrderPrice() {
				this.$http.post('/app/order/order/calculateOrderPrice', this.order).then(res => {
					this.totalItem = res.data
				})
			},
			submit() {
				if (!this.order.addressId) {
					this.$refs.lwMessage.show({
						id: "",
						msg: '请选择地址',
						type: "warning",
					})
					return
				}
				if (!this.order.serviceTime) {
					this.$refs.lwMessage.show({
						id: "",
						msg: '请选择服务时间',
						type: "warning",
					})
					return
				}
				this.$http.post('/app/order/order/createOrder', this.order).then(res => {
					uni.redirectTo({
						url: '/pages/pay/pay?id=' + res.data.sn + '&orderType=ORDER'
					})
				})
			},
			bookTime() {
				uni.navigateTo({
					url: '/pages/bookTime/bookTime?technicianId='+this.order.technicianId
				})
			},
			toAddress() {
				uni.navigateTo({
					url: '/pages/my/address?tId=' + this.order.technicianId
				})
			},
			setAddress(item) {
				this.order.addressId = item.id
				this.address = item
			},
			setCoupon(item) {
				this.order.couponId = item.id
				this.calculateOrderPrice()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bottom {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100vw;
		height: 120rpx;
		background: #fff;
		padding: 0 15px;
		box-sizing: border-box;
		z-index: 999;

		.all {
			color: #333;
			font-size: 30rpx;

			text {
				color: #ff8601;
				font-size: 40rpx;
			}
		}

		.btn {
			width: 220rpx;
			height: 80rpx;
			background: #aa8050;
			border-radius: 40rpx;
			color: #fff;
			line-height: 80rpx;
			font-size: 30rpx;
			margin: 0 !important;

			&::after {
				border: none;
			}
		}
	}

	.submit-order {

		background-color: #f0f0f0;
		min-height: 100vh;
		overflow: hidden;

		.content {
			padding: 30rpx 20rpx 145rpx;
			position: relative;
			z-index: 100;

			.remarks {
				padding: 0 20rpx 0 30rpx;

				.line::after {
					display: none;
				}

				.info {
					flex: 1;

					.ads {
						font-size: 16rpx;

						view {
							height: 40rpx;
							line-height: 40rpx;
						}
					}

					input {
						flex: 1;
						height: 40rpx;
						line-height: 40rpx;
						color: #999;
						font-size: 28rpx;
						text-align: right;
					}
				}
			}

			.note {
				width: 100%;
				background: #fbf2de;
				padding: 20rpx;
				border-radius: 8rpx;
				margin-bottom: 20rpx;
				box-sizing: border-box;
			}

			.inner {
				padding: 0 10rpx;

				.allPrice {
					justify-content: flex-end;
				}

				.coupon {
					.text {
						color: #999;
						font-size: 28rpx;
					}

					.info {
						flex: 1;
					}
				}



				.fare {}

				.product {
					height: 272rpx;

					&::after {
						display: none;
					}

					.op {
						height: 100%;
						justify-content: flex-end;
						align-items: flex-end !important;
						padding-bottom: 36rpx;
						box-sizing: border-box;
					}

					.productInfo {
						flex: 1;
						color: #666;
						font-size: 30rpx;


						.count {
							color: #999;
							font-size: 26rpx;
							margin: 14rpx 0 40rpx;
						}

						.name {
							width: 100%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}

					.logo {
						width: 200rpx;
						height: 200rpx;
						border-radius: 10rpx;
						margin-right: 20rpx;
					}
				}
			}



			.noMore {
				display: none;

				&::after {
					display: none !important;
				}
			}

			.showVisitTips {
				border-radius: 0 0 20rpx 20rpx !important;

				.line {
					height: 98rpx;
					border-bottom: 2rpx solid #f8f8f8;

					image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 14rpx;
					}
				}

				.technician {
					color: #333;
					font-size: 28rpx;
					justify-content: flex-end;

					image {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						margin-left: 10rpx;
					}
				}

				.info {
					flex: 1;
					color: #000;
					font-size: 30rpx;
				}

				.time {
					border-bottom: none;

					span {
						color: #999;
						font-size: 28rpx;
					}

					&::after {
						display: block;
						content: "";
						width: 14rpx;
						height: 26rpx;
						background: url(/static/grey-arrow-right.png) no-repeat;
						background-size: 100% auto;
						margin-left: 10rpx;
						transform: translateY(1rpx);
					}


				}

				.address {
					height: 130rpx;

					&::after {
						display: block;
						content: "";
						width: 14rpx;
						height: 26rpx;
						background: url(/static/grey-arrow-right.png) no-repeat;
						background-size: 100% auto;
						margin-left: 10rpx;
						transform: translateY(1rpx);
					}


					image {
						width: 24rpx;
						height: 28rpx;
						margin-right: 14rpx;
					}
				}
			}

			.top {
				padding: 0 20rpx;
			}

			.box {
				width: 710rpx;
				background: #fff;
				border-radius: 20rpx;
				overflow: hidden;
				box-sizing: border-box;
				margin-bottom: 20rpx;
			}

			.visitTips {
				padding: 0 20rpx;
				height: 60rpx;
				background: linear-gradient(180deg, #f7eacf, #e9d6ad 53%, #e3cea0);
				border-radius: 20rpx 20rpx 0 0;
				font-size: 22rpx;
				font-weight: 700;
				color: #9e653f;

				&::before {
					content: "";
					width: 24rpx;
					height: 28rpx;
					background: url(/static/shandian.png) no-repeat;
					background-size: 100% auto;
					margin-right: 14rpx;
				}
			}
		}

		.line {
			padding: 0 10rpx 0 20rpx;
			height: 98rpx;
			border-bottom: 2rpx solid #f8f8f8;
			color: #000;
			font-size: 30rpx;

			&::after {
				display: block;
				content: "";
				width: 14rpx;
				height: 26rpx;
				background: url(/static/grey-arrow-right.png) no-repeat;
				background-size: 100% auto;
				margin-left: 10rpx;
				transform: translateY(2rpx);
			}
		}
	}
</style>
